<template>
	<div>
		<div class="table">
			<el-table
				:data="check || sanCheck"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName"
				:height="450"
				
				:fit="true">
				<el-table-column prop="buildId" label="楼栋" width="180" />
				<el-table-column prop="dorNumber" label="寝室号" width="180" />
				<el-table-column prop="checkPerson" label="检查人员" />
				<el-table-column prop="checkTime" label="检查时间">
					<template #default="{ row }">
						{{ new Date(row.checkTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column prop="checkSore" label="检查分数" />
				<el-table-column prop="hygDes" label="卫生问题" />
				<el-table-column prop="createTime" label="创建时间">
					<template #default="{ row }">
						{{ new Date(row.createTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间">
					<template #default="{ row }">
						{{ new Date(row.updateTime).toLocaleDateString() }}
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="20"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAllCheckInfo } from '@/utils/axios/master'
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])
const sanCheck = ref([])




const handleSizeChange = async (val) => {
	let { data } = await getAllCheckInfo({ currentPage, pageSize: val })
	sanCheck.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await getAllCheckInfo({ currentPage: val, pageSize: pageSize.value })
	sanCheck.value = data
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

// 加载数据
onMounted(async () => {
	let { data } = await getAllCheckInfo({ currentPage: val, pageSize: 10 })
	sanCheck.value = data

})
</script>

<style scoped lang="sass">
.btn
  background: rgb(0,202,237)
  color: #ffff
.header
  margin-bottom: 20px
.pagination
  position: absolute
  bottom: 10px
  right: 0
  margin-top: 20px
  justify-content: end
</style>
